<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:replace="dashboard/header :: header"></div>

<body id="page-top">

	<div id="wrapper">

		<div id="content-wrapper">
			<div class="container-fluid">

				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="#">主机管理</a></li>
				</ol>
				<form class="form-inline" id="trainingSearchForm">
					<div class="input-group mb-2 mr-sm-2">
						<select name="condition[masterCode]" style="width: 200px"
							id="inputState" class="form-control">
							<option th:each="m:${schools}" th:text="${m.masterName}"
								th:value="${m.masterCode}"></option>
						</select>
					</div>
					<button type="button" onclick="search(this)"
						class="btn btn-primary mb-2">搜索</button>

					<button style="margin-left: 10px;" type="button" onclick="add()"
						class="btn btn-primary mb-2">添加</button>
				</form>

				<div class="span12">
					<div class="table-responsive">
						<table class="table table-bordered" id="dataTable" width="100%"
							cellspacing="0">
							<thead>
								<tr>
									<th width="30px">顺序</th>
									<th>所属机房</th>
									<th>IP地址</th>
									<th>主机描述</th>
									<th>排序</th>
									<th>使用者</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
							<footer>
								<tr>
									<th width="30px">顺序</th>
									<th>所属机房</th>
									<th>IP地址</th>
									<th>主机描述</th>
									<th>排序</th>
									<th>使用者</th>
									<th>操作</th>
								</tr>
							</footer>
						</table>
					</div>
				</div>

			</div>
		</div>
	</div>

	<script
		src="http://training-static.linesno.com/vendor/jquery/jquery.min.js"></script>
	<script
		src="http://training-static.linesno.com/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
	<script src="http://training-static.linesno.com/layer/layer.js"></script>

	<script
		src="http://training-static.linesno.com/vendor/jquery-easing/jquery.easing.min.js"></script>

	<script
		src="http://training-static.linesno.com/vendor/datatables/jquery.dataTables.js"></script>
	<script
		src="http://training-static.linesno.com/vendor/datatables/dataTables.bootstrap4.js"></script>

	<script type="text/javascript">
		$(document).ready(function() {
		  $('#dataTable').DataTable({
			  serverSide: true ,
			  ordering: false , 
			  searching : false ,
              bLengthChange : false ,
              rowNum : 15 , 
              multiselect : true,
              ajax : {
                  "url": "/manager/server_list_data",
                  "dataType": "json" , 
                  "data": function (d) {
                      console.log('d = ' + d) ;
                      var searchParams = paramsBuilder() ;
                      if(searchParams){
                        $.extend(d,searchParams); 
                      }
                  }
              } ,
              columns: [
                  { data: 'serverOrder' },
                  { data: 'masterCode_label' },
                  { data: 'serverName' },
                  { data: 'serverDesc' },
                  { data: 'serverOrder' },
                  { data: 'fieldProp' },
                  { data: 'id' } 
              ] , 
              columnDefs: [{
                  "render": function(data, type, row) {
                	  		var id = '"' + row.id + '"';
   		           		var html = "<a data-id='"+data+"' style='cursor:pointer' onclick='modify(this)'><i class='fa fa-edit'></i> 修改</a>" ; 
   		           		if(row.hasStatus == "1"){
							html += "<a style='cursor:pointer;margin-left:10px;color:red' onclick='changeStatus("+id+");'><i class='fa fa-user-times'></i> 禁用</a>" ; 
		           		}else{
							html += "<a style='cursor:pointer;margin-left:10px;' onclick='changeStatus("+id+");'><i class='fa fa-user-plus'></i> 启用</a>" ; 
		           		}
   		           		return html;
                  },
                  "targets": 6
              }],
              language : {
                  "sProcessing": "处理中...",
                  "sLengthMenu": "显示 _MENU_ 项结果",
                  "sZeroRecords": "没有匹配结果",
                  "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                  "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                  "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                  "sInfoPostFix": "",
                  "sSearch": "搜索:",
                  "sUrl": "",
                  "sEmptyTable": "表中数据为空",
                  "sLoadingRecords": "载入中...",
                  "sInfoThousands": ",",
                  "oPaginate": {
                      "sFirst": "首页",
                      "sPrevious": "上页",
                      "sNext": "下页",
                      "sLast": "末页"
                  },
                  "oAria": {
                      "sSortAscending": ": 以升序排列此列",
                      "sSortDescending": ": 以降序排列此列"
                  }
             }

		  });
		});
		
		
		//搜索
		function search(btn){
			// $('#dataTable').draw();
			$("#dataTable").dataTable().fnDraw(false);
		}
		
		
		/**
		 * get params
		 */
		function paramsBuilder() {
		    var param = {} ;
		    $('#trainingSortPanel input').each(function() {
		        if ($(this).val() != '' && this.name != '') {
		            param[this.name] = this.value;
		        }

		    });
		    var i = $('#trainingSearchForm input') ; 
		    console.log("i = " + i) ; 
		    $('#trainingSearchForm input').each(function() {
		        if ($(this).val() != '' && this.name != '') {
		            param[this.name] = this.value;
		        }

		    });
		    $('#trainingSearchForm select').each(function() {
		        console.log('value = ' + this.value + ' , value = ' + $(this).val());
		        if ($(this).val() != null &&  $(this).val() != '' && this.name != '') {
		            param[this.name] = $(this).val() ;
		        }
		    });
		    return param ;
		}
		
		function add(btn){
			layer.open({
				  type: 2,
				  title: false,
				  shade: 0.8, 
				  title: '修改',
				  area: ['50%', '80%'],
				  content: ['/manager/server_add', 'yes'], //iframe的url，no代表不显示滚动条
				  end: function(){ //此处用于演示
				     console.log("close") ; 
				     $("#dataTable").dataTable().fnDraw(false);
				  }
				});
		}
		
		function modify(btn){
			var id = $(btn).attr("data-id") ;
			console.log("id = "+id) ; 
			layer.open({
				  type: 2,
				  title: false,
				  shade: 0.8, 
				  title: '修改',
				  area: ['50%', '80%'],
				  content: ['/manager/server_modify/'+id, 'yes'], //iframe的url，no代表不显示滚动条
				  end: function(){ //此处用于演示
				     console.log("close") ; 
				     $("#dataTable").dataTable().fnDraw(false);
				  }
				});
		}
		
		
		function changeStatus(uid){
			console.log("user id = " + uid) ; 
			$.get("/manager/server_changeStatus?id="+uid , function(response){
				$("#dataTable").dataTable().fnDraw(false);
			}) ; 
		}
		
	</script>

</body>

</html>
